@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');
body {
  margin: 0;
  /* font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
  background-color: black;
  color: #fff;
}

.software-ui-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #050505;
}

.software-ui-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.software-ui-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 1200px;
  padding: 2rem;
  color: #fff;
}

.software-ui-title {
  font-size: 6rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1rem;
  margin-top: 80px;
}

@media (min-width: 768px) {
  .software-ui-title {
    font-size: 6rem;
    line-height: 1;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;

  }
}

.software-ui-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}

.software-ui-button {
  display: inline-block;
  background: linear-gradient(90deg, #ff3a82, #5233ff);
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(255, 58, 130, 0.3);
  transition: all 0.3s ease;
}

.software-ui-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 58, 130, 0.5);
}

.software-ui-chevron {
  margin-left: 0.5rem;
}
/* Medium screens */
@media (max-width: 768px) {
  .software-ui-title {
    font-size: 2.6rem;
  }

  .software-ui-subtitle {
    font-size: 1.2rem;
  }
}

/* Large screens */
@media (min-width: 1024px) {
  .software-ui-title {
    font-size: 6rem;
  }

  .software-ui-subtitle {
    font-size: 1.25rem;
  }
}

/* Gradient Spheres */
.gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.sphere-1 {
  width: 40vw;
  height: 40vw;
  background: linear-gradient(40deg, rgba(255, 0, 128, 0.8), rgba(255, 102, 0, 0.4));
  top: -10%;
  left: -10%;
  animation: float-1 15s ease-in-out infinite alternate;
}

.sphere-2 {
  width: 45vw;
  height: 45vw;
  background: linear-gradient(240deg, rgba(72, 0, 255, 0.8), rgba(0, 183, 255, 0.4));
  bottom: -20%;
  right: -10%;
  animation: float-2 18s ease-in-out infinite alternate;
}

.sphere-3 {
  width: 30vw;
  height: 30vw;
  background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
  top: 60%;
  left: 20%;
  animation: float-3 20s ease-in-out infinite alternate;
}

@keyframes float-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(10%, 10%) scale(1.1); }
}
@keyframes float-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10%, -5%) scale(1.15); }
}
@keyframes float-3 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6; }
}

/* Glow, Grid, Noise */
.glow {
  position: absolute;
  width: 40vw;
  height: 40vh;
  background: radial-gradient(circle, rgba(72, 0, 255, 0.15), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: pulse 8s infinite alternate;
  filter: blur(30px);
}

@keyframes pulse {
  0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}

.grid-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 40px 40px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  z-index: 2;
}

.noise-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Particles */
.particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.particle {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}




:root {
  --text-color: #a1a1a1;
  --accent-color: #111;
  --geist-foreground-rgb: 255, 255, 255;
  --border-radius: 12px;
}

/**************************/
/****************/
.spacer {
  padding-top: 300px;
}

.tds-layout.dx-fixed-background__layout {
  -webkit-padding-end: 10px;
  -webkit-padding-start: 10px;
  grid-template-areas: "main main";
  grid-template-columns: repeat(2, 1fr);
  padding-inline-end: 10px;
  padding-inline-start: 10px;
}

.dx-fixed-background {
  --dx-fixed-bg-section-height: 200vh;
}

.dx-fixed-background__container {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--dx-fixed-bg-section-height);
  justify-content: center;
  overflow: hidden;
  position: relative;
    z-index: 0;
     min-height: 100vh; 
}
.dx-fixed-background__media-wrapper {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.dx-fixed-background__media {
  display: block;
  width: 100%;
  height: 100%;
}

.dx-fixed-background__media-asset {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.dx-fixed-background__media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  /* margin-top: -100vh; */
  overflow: hidden;
  position: sticky;
  top: 0;
}

.dx-fixed-background__media-asset {
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

.tds-theme--replicant-v2 [class*=tds-clip-] {
  --clip-size: 20px;
  --top-left-normal: 0 0;
  --top-left-clip: 0 var(--clip-size),var(--clip-size) 0;
  --top-right-normal: 100% 0;
  --top-right-clip: calc(100% - var(--clip-size)) 0,100% var(--clip-size);
  --bottom-right-normal: 100% 100%;
  --bottom-right-clip: 100% calc(100% - var(--clip-size)),calc(100% - var(--clip-size)) 100%;
  --bottom-left-normal: 0 100%;
  --bottom-left-clip: var(--clip-size) 100%,0 calc(100% - var(--clip-size));
  --clip: polygon(var(--top-left,var(--top-left-normal)),var(--top-right,var(--top-right-normal)),var(--bottom-right,var(--bottom-right-normal)),var(--bottom-left,var(--bottom-left-normal)));
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

.tds-theme--replicant-opaque-bg {
  -webkit-backdrop-filter: blur(var(--tds-blur--small));
  backdrop-filter: blur(var(--tds-blur--small));
  background: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.dx-fixed-background {
  --dx-fixed-bg-section-height: 110vh;
}
.gradient-bg {
  width: 100%;
  background: linear-gradient(
    to bottom,
    #0a0a0a 0%,
    #111111 25%,
    #141414 50%,
    #111111 75%,
    #0a0a0a 100%
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
}
.gradient-bg-t{
  width: 100%;
  background: linear-gradient(
    to bottom,
    #0a0a0a 100%,
    #111111 75%,
    #141414 50%,
    #111111 75%,
    #0a0a0a 100%
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
}
/* .gradient-bg::before,
.gradient-bg::after,
.gradient-bg-t::before,
.gradient-bg-t::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.8;
  animation: floatParticles 14s linear infinite;
  filter: blur(1px);
 box-shadow:
  100px 200px #00ffff,
  300px 400px #ff00ff,
  500px 150px #00ffea,
  700px 250px #a0f,
  900px 100px #00c3ff,
  1100px 300px #ff61f6,
  1300px 200px #0ff,
  150px 500px #f0f,
  1600px 350px #fff,
  1800px 450px #00ffee,
  200px 700px #33ccff,
  400px 600px #ff33cc,
  600px 100px #66fcf1,
  800px 550px #c77dff,
  1000px 250px #ff6ec7,
  1250px 420px #40e0d0,
  1450px 360px #ffccff,
  1700px 280px #b19cd9;

}

.gradient-bg::after,
.gradient-bg-t::after {
  animation-delay: 7s;
  box-shadow:
  200px 500px #ff00ff,
  400px 600px #00ffea,
  600px 300px #00ffff,
  800px 200px #a0f,
  1000px 400px #00c3ff,
  1200px 100px #ff61f6,
  1400px 250px #0ff,
  100px 350px #f0f,
  1800px 150px #fff,
  1600px 100px #00ffee,
  900px 700px #33ccff,
  300px 100px #ff33cc,
  500px 800px #e0ffff,
  700px 480px #c0c0ff,
  950px 550px #ffd1dc,
  1150px 220px #a0ffff,
  1350px 620px #ffe4e1,
  1550px 300px #f8f8ff;

}

@keyframes floatParticles {
  0% {
    transform: translateY(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-130vh);
    opacity: 0;
  }
} */


.dx-fixed-background__media-wrapper {
  height: var(--dx-fixed-bg-section-height);
  inset-inline-start: 0;
  position: absolute;
  top: 0;
  width: 100%;
  transform: scale(1);
  border-radius: 0;
}

.dx-fixed-background .dx-fixed-wrapper {
  padding: 24px;
  background: #fff;
  position: relative;
}
@media (max-width: 768px) {
  .dx-fixed-background__container {
    padding: 1rem;
  }

  .dx-fixed-background__media-wrapper {
    height: auto;
  }
  .dx-fixed-background {
    --dx-fixed-bg-section-height: 80vh; /* or a smaller value */
  }

  .dx-fixed-background__container {
    min-height: 50vh;
    height: auto;
  }
}


/****************************/

@media (max-width: 600px) {
    .container {
        max-width: 88% !important;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 93% !important;
    }
} 


.ourwork-section {
padding: 100px 20px 60px;

}

.ourwork-wrapper {
    /* position:absolute; */
  /* padding-top: 80px; */
  padding-bottom: 60px;
  max-width: 1100px;
  margin: auto;
}

.ourwork-header {
  text-align: center;
  margin-bottom: 50px;
}

.ourwork-header h1 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.ourwork-header p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.1rem;
}

.ourwork-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media screen and (min-width: 768px) {
  .ourwork-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .ourwork-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ourwork-card {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s;
}

.ourwork-card:hover {
  transform: translateY(-5px);
}

.ourwork-media {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.ourwork-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ourwork-hover {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-in-out;
}

.ourwork-media:hover .ourwork-hover {
  opacity: 1;
}

.ourwork-hover i {
  font-size: 1.8rem;
  color: white;
}

.ourwork-info {
  padding: 20px;
}

.ourwork-type {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.ourwork-info h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.ourwork-info p {
  color: rgba(255, 255, 255, 0.6);
}
  .our-journey-section {
      padding: 60px 20px;
    }

    .our-journey-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
    }

    .our-journey-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .our-journey-header h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }

    .our-journey-header p {
      color: #aaa;
    }

    .our-journey-timeline {
      position: relative;
      padding: 60px 0;
    }

    .journey-line-a {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 82%;
      background-color: #555;
      z-index: 1;
    }
     .journey-line {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 100%;
      background-color: #555;
      z-index: 1;
    }

    .journey-marker {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 14px;
      background-color: #4e4343;
      border: 2px solid #aaa;
      border-radius: 50%;
      z-index: 2;
    }

    .journey-item {
      position: relative;
      width: 50%;
      padding: 20px 40px;
      box-sizing: border-box;
    }

    .journey-item .journey-content {
     background-color: #1e1e1e;
    padding: 20px;
    border-width: 1px;
    border-color: rgb(255 255 255 / 0.1);
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1)
    }

     .journey-item .journey-content h3{
      color: #ffea00;
     }

    .journey-item.left {
      left: 0;
      text-align: right;
    }

    .journey-item.right {
      left: 50%;
      text-align: left;
    }

    .journey-item .year {
      font-weight: bold;
      color: #aaa;
      margin-bottom: 5px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .journey-item,
      .journey-item.left,
      .journey-item.right {
        width: 100%;
        left: 0;
        text-align: left;
        padding: 20px 20px;
      }

      .journey-line {
        left: 20px;
        transform: none;
      }

      .journey-marker {
        left: 20px;
        transform: translateX(0);
      }
      .jo-dot_2 {
        top: 281px;
      }
    }

    /* three-box */
    .three-box h2 {
  text-transform: capitalize;
  letter-spacing: 0.025em;
  position: relative;
  margin-top: 10px;
  /* margin-bottom: 15px; */
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  text-align: left;
  margin-bottom: 10px;
  font-family: "Marcellus", serif;
  font-size: 36px;
  font-weight: 400;
}

.h2-text-wu{
      font-family: "Playfair Display", serif;
    font-size: 25px;
}
.three-box h2::after {
    position: absolute;
    content: "";
    background-color: #FFCC00;
    height: 3px;
    width: 100px;
    bottom: -1px;
    left: 0;
}
.three-box a {
  display: inline-block;
  text-decoration: none;
}
.three-box .container-threebox {
  margin-top: 5em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}
.three-box .container-threebox .card-d:nth-child(1) .box .iccon .iconBox {
  background: #d3b19a;
}
.three-box .container-threebox .card-d:nth-child(2) .box .iccon .iconBox {
  background: #70b3b1;
}
.three-box .container-threebox .card-d:nth-child(3) .box .iccon .iconBox {
  background: #d05fa2;
}
.three-box .container-threebox .card-d ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.three-box .container-threebox .card-d ul li {
  text-transform: uppercase;
  background: var(--clr-tag);
  color: #282828;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.188rem;
}
.three-box .container-threebox .card-d ul .branding {
  color: #704a31;
}
.three-box .container-threebox .card-d ul .packaging {
  color: #1e3938;
}
.three-box .container-threebox .card-d ul .marketing {
  color: #4d1637;
}
.three-box .container-threebox .card-d .content-card {
  padding: 0.938rem 0.625rem;
}
.three-box .container-threebox .card-d .content-card h3 {
  text-transform: capitalize;
  font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
}
.three-box .container-threebox .card-d .content-card p {
  margin: 0.625rem 0 1.25rem;
  color: #565656;
}
.three-box .container-threebox .card-inner {
  position: relative;
  width: inherit;
  height: 18.75rem;
  background: var(--clr);
  border-radius: 1.25rem;
  border-bottom-right-radius: 0;
  overflow: hidden;
}
.three-box .container-threebox .card-inner .box {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 1.25rem;
  overflow: hidden;
}
.three-box .container-threebox .card-inner .box .imgBox {
  position: absolute;
  inset: 0;
}
section .container-threebox .card-inner .box .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.three-box .container-threebox .card-inner .box .iccon {
  position: absolute;
  bottom: -0.375rem;
  right: -0.375rem;
  width: 6rem;
  height: 6rem;
  background: #0a0a0a;
  border-top-left-radius: 50%;
}
.three-box .container-threebox .card-inner .box .iccon:hover .iconBox {
  transform: scale(1.1);
}
.three-box .container-threebox .card-inner .box .iccon::before {
  position: absolute;
  content: "";
  bottom: 0.375rem;
  left: -1.25rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem #0a0a0a;
}
.three-box .container-threebox .card-inner .box .iccon::after {
  position: absolute;
  content: "";
  top: -1.25rem;
  right: 0.375rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.313rem 0.313rem 0 0.313rem #0a0a0a;
}
.three-box .container-threebox .card-inner .box .iccon .iconBox {
  position: absolute;
  inset: 0.625rem;
  background: #282828;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.three-box .container-threebox .card-inner .box .iccon .iconBox span {
  color: #fff;
  font-size: 1.5rem;
}
.three-box-section {
    /* position: absolute; */
    padding-top: 80px;
    padding-bottom: 60px;
    padding: 140px;
    margin: auto;
}


/* Medium screens (tablets) */
@media (max-width: 992px) {
    .three-box-section {
        padding: 60px 15px 40px 15px;
    }
}

/* Small screens (phones) */
@media (max-width: 576px) {
    .three-box-section {
        padding: 40px 10px 30px 10px;
    }
}

 .integration-section {
      padding: 80px 0;
      text-align: center;
      /* background: linear-gradient(to bottom, #15002c, #0f001c); */
    }

.integration-section h2 {
    font-size: 48px;
    margin-bottom: 50px;
    background: linear-gradient(80deg, #ffffff, #121212);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.integration-section h2 span {
    color: #f9ff00;  /* yellow */
    -webkit-text-fill-color: #bec208; /* override transparent fill */
    background: none; /* remove background gradient */
    -webkit-background-clip: unset; /* remove clipping */
}


    .scroll-mask {
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, white 10%, white 90%, transparent);
    }

    .scroll-row {
      display: flex;
      gap: 20px;
      animation: scroll-left 50s linear infinite;
      width: fit-content;
          padding-bottom: 10px;
    padding-top: 10px;
    }

    .scroll-row.scroll-right {
      animation: scroll-right 30s linear infinite;
    }

    .icon-box {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .icon-box img {
      width: 30px;
      height: 30px;
      object-fit: contain;
    }
    .icon-box:hover {
   --bg-opacity: 1;
  background-color: rgba(33, 34, 36, var(--bg-opacity));
  transform: 
    translate(4px, -4px)
    rotate(2deg)
    /* skewX(1deg) */
    skewY(1deg)
    scale(1.05);
}

    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes scroll-right {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* Responsive */
    @media (max-width: 768px) {
      .icon-box {
        width: 50px;
        height: 50px;
      }

      .icon-box img {
        width: 24px;
        height: 24px;
      }
    }

.carousel-wrappep {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    --mask-offset: 6rem;
    mask-image: linear-gradient(to right, transparent .5rem, #000 var(--mask-offset), #000 calc(100% - var(--mask-offset)), transparent calc(100% - .5rem));
}

@media (max-width: 768px) {
  .carousel-wrappep {
    --mask-offset: 2rem;
  }
}

.scroll-mask {
  overflow: hidden;
  position: relative;

  /* FIX HERE — changed from white to black */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}

  .automation-wrapper {
      font-family: sans-serif;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      /* background: #0b0a14; */
      position: relative;
      overflow: hidden;
      animation: rotation 8s linear infinite;
    }

    .center-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      position: relative;
      z-index: 1;
    }

   .automation-section {
  background: rgba(11, 10, 20, 0.6); 
  backdrop-filter: blur(22px);     
  border-radius: 16px;
  padding: 10rem 10%;
  width: 1200px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 100, 50, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 2;
  margin: 0 auto;
}


.automation-section h1 {
  font-size: clamp(2rem, 6vw, 54px);
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.2;
  font-family: geomanist-book, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: 900;
}

.automation-section p {
  font-size: clamp(1rem, 4vw, 20px);
  color: #ccc;
  margin-bottom: 10px;
}

    .highlight-text {
      background-color: rgba(26,26,26,0.8);
      padding: 2px 6px;
      border-radius: 6px;
      display: inline-block;
    }

    .gradient-text {
      background: linear-gradient(90deg, #ff6b35, #ff3c28);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: bold;
    }

    .start-button {
      display: inline-block;
      margin-top: 25px;
      padding: 0.75rem 2rem;
      background: linear-gradient(90deg, #ff6b35, #ff3c28);
      color: #fff;
      font-weight: bold;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 0 20px rgba(255, 60, 40, 0.5);
      transition: transform 0.2s ease;
    }

    .start-button:hover {
      transform: scale(1.05);
    }

    /* Animation Background Setup */
    @property --angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: true;
    }

    :root {
      --speed: 1.6;
      --filter: url(#blurFilter) drop-shadow(0 0 6vmin rgba(0, 0, 0, 0.2));
    }

    .scene {
      filter: var(--filter);
      background: #e93e1e;
      width: 10vmin;
      border-radius: 50%;
      height: 10vmin;
      position: absolute;
      rotate: var(--angle);
      z-index: 0;
    }

    .scene:before {
      pointer-events: none;
      rotate: calc(var(--angle) * -1);
      border: 1vmin dashed rgba(0, 0, 0, 0.2);
      filter: brightness(1.5);
      content: '';
      position: absolute;
      inset: -3vmin;
      border-radius: inherit;
      background: inherit;
    }

    @keyframes rotation {
      to {
        --angle: 360deg;
      }
    }

    .koi {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      --ai: calc(360deg / 2 * var(--i));
      --r: 16vmin;
      translate: calc(cos(var(--ai)) * var(--r) * -1)
        calc(sin(var(--ai)) * var(--r) - 35%);
      rotate: calc(var(--ai) - 25deg);
      --i: 0;
      --c: #95a423;
    }

    .koi:last-of-type {
      --i: 1;
      --c: white;
    }

    .head {
      width: 10vmin;
      height: 16vmin;
      background: var(--c);
      border-radius: 50% 50% 3vmin 3vmin;
      position: relative;
      display: grid;
      place-items: center;
      z-index: 1;
      mask: radial-gradient(1.7vmin 2.4vmin at 25% 30%, transparent 1vmin, black 0.35vmin),
            radial-gradient(1.7vmin 2.4vmin at 75% 30%, transparent 1vmin, black 0.35vmin);
      mask-composite: intersect;
      animation: head calc(5s * var(--speed)) ease-in-out infinite;
      --part-distance: 1vmin;
      --part-rotation: 6deg;
      --part-initial-rotation: 40deg;
      transform-origin: bottom;
    }

    @keyframes head {
      from, to {
        translate: 0 0;
        rotate: var(--part-initial-rotation);
      }
      25%, 70% {
        translate: var(--part-distance) 0;
        rotate: calc(var(--part-rotation) + var(--part-initial-rotation));
      }
      50% {
        translate: calc(var(--part-distance) * -1) 0;
        rotate: calc(var(--part-rotation) * -1 + var(--part-initial-rotation));
      }
    }

    .body .parts {
      display: flex;
      flex-direction: column;
      --part-distance: 1vmin;
    }

    .part {
      animation: body-part calc(1s * var(--speed)) ease-in-out infinite;
      background: var(--c);
      width: 10vmin;
      height: 3vmin;
      border-radius: 2vmin;
      margin-top: -1vmin;
      scale: 1;
    }

    .part:nth-child(1) { --i: 0; }
    .part:nth-child(2) { --i: 1; }
    .part:nth-child(3) { --i: 2; }
    .part:nth-child(4) { --i: 3; }
    .part:nth-child(5) { --i: 4; }
    .part:nth-child(6) { --i: 5; }
    .part:nth-child(7) { --i: 6; }
    .part:nth-child(8) { --i: 7; }

    .part {
      --delay: calc(var(--i) * 0.1s);
      scale: calc(1 - 0.08 * var(--i));
      rotate: calc(30deg / 10 * var(--i));
    }

    @keyframes body-part {
      from, to {
        translate: 0 0;
      }
      25%, 70% {
        translate: var(--part-distance) 0;
      }
      50% {
        translate: calc(var(--part-distance) * -1) 0;
      }
    }

    .fin {
      position: absolute;
      translate: 0 10vmin;
      width: 18vmin;
      height: 15vmin;
      background: var(--c);
      transform-origin: top;
      clip-path: polygon(100% 60%, 100% 100%, 50% 30%, 0 100%, 0 60%, 50% 0);
      animation: fin 1s ease-in-out infinite;
    }

    @keyframes fin {
      from, to {
        scale: 1;
        rotate: 0;
      }
      50% {
        scale: 0.99 0.99;
        rotate: 2deg;
      }
    }

    .tail {
      translate: -7.5vmin -2vmin;
    }

    .tail:before,
    .tail:after {
      content: "";
      position: absolute;
      width: 15vmin;
      height: 15vmin;
      background: var(--c);
      transform-origin: top;
      clip-path: polygon(100% 60%, 100% 100%, 50% 20%, 0 100%, 0 60%, 50% 0);
      --part-distance: 1vmin;
      --part-rotation: 20deg;
      --part-base-rotation: -20deg;
      animation: tail calc(1s * var(--speed)) ease-in-out infinite;
    }

    .tail:after {
      clip-path: polygon(100% 80%, 100% 100%, 50% 10%, 0 100%, 0 80%, 50% 0);
      --part-distance: 2vmin;
      --part-rotation: 15deg;
      animation-duration: calc(1.5s * var(--speed));
    }

    @keyframes tail {
      from, to {
        translate: 0 0;
        rotate: var(--part-base-rotation);
      }
      25%, 70% {
        translate: var(--part-distance) 0;
        rotate: calc(var(--part-rotation) + var(--part-base-rotation));
      }
      50% {
        translate: calc(var(--part-distance) * -1) 0;
        rotate: calc(var(--part-rotation) * -1 + var(--part-base-rotation));
      }
    }

    .filter {
      position: absolute;
      visibility: hidden;
      pointer-events: none;
    }
/* 
    .mouse-circle {
  position: absolute;
  width: 230vmin;
  height: 120vmin;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(188, 201, 45, 0.4), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(20px);
  z-index: 0;
  transition: transform 0.1s ease-out;
} */
/* Responsive Media Queries */
@media (max-width: 1024px) {
  .automation-section {
    width: 100%;
    padding: 4rem 6%;
  }

  .scene {
    width: 12vmin;
    height: 12vmin;
  }

  .head, .part {
    width: 8vmin;
  }

  .part {
    height: 2.5vmin;
  }
}

@media (max-width: 768px) {
  .automation-wrapper,
  .center-wrapper {
    flex-direction: column;
    align-items: center;
    margin-top: -75px;
  }

  .automation-section {
    width: 100%;
    padding: 3rem 5%;
  }

  .automation-section h1 {
    font-size: 2rem;
  }

  .automation-section p {
    font-size: 1rem;
  }

  .start-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }

  .scene {
    width: 10vmin;
    height: 10vmin;
  }

  .mouse-circle {
    width: 140vmin;
    height: 70vmin;
  }
}

@media (max-width: 480px) {
  .automation-section {
    padding: 5rem 7%;
  }

  .automation-section h1 {
    font-size: 1.5rem;
  }

  .automation-section p {
    font-size: 0.95rem;
  }

  .start-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .mouse-circle {
    width: 120vmin;
    height: 60vmin;
  }
}



.reviewerr-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    z-index: 2;
    position: relative;
    margin-bottom: 1rem;
    display: inline-block;
}
.jo-dot_1{
  top: 80px;
}
.jo-dot_2{
  top: 250px;
}
.jo-dot_3{
  top: 430px;
}
.jo-dot_4{
  top: 610px;
}
.jo-dot_5{
  top: 780px;
}
.jo-dot_6{
  top: 960px;
}




@media (max-width: 720px) {
    .journey-line-a {
        left: 6%;
    }
    .jo-dot_1{
      top: 80px;
    }
    .jo-dot_2{
      top: 283px;
    }
    .jo-dot_3{
      top: 485px;
    }
    .jo-dot_4{
      top: 710px;
    }
    .jo-dot_5{
  top: 935px;
    }
    .jo-dot_6{
      top: 1140px;
    }
    .journey-line-a {    
      height: 83%;
    }
}